<template>
  <view class="su-select">
    <view class="su-select-handler" @click="show=!show">
      <text class="su-select-value" v-if="activeVal && activeVal[labelName]">{{activeVal[labelName]}}</text>
      <text class="su-select-placeholder" v-else>{{placeholder}}</text>
      <text class="su-select-arrow iconfont icon-down-arrow-line"></text>
    </view>
    <u-popup :show="show" @close="show=false" @open="show=true">
      <view class="su-select-options">
        <view class="su-select-options-item" v-for="(item,index) in options" :key="index" @click="itemClick(item,index)">
          <view class="su-select-options-item__start">
            {{item[labelName]}}
          </view>
          <view class="su-select-options-item__end">
            <text v-if="item[valueName]===value" class="iconfont icon-radio-checked color-primary"></text>
            <text v-else class="iconfont icon-radio-notcheck"></text>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  /**
   * @description 简单下啦选择
   * @date 2022-07-03
   * @version v1.0.1
   * @author xx
   */
  export default {
    name: "su-select",
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      value: {
        type: [String, Number],
        default: ''
      },
      options: {
        type: Array,
        default () {
          return []
        }
      },
      valueName: {
        type: [String, Number],
        default: 'value'
      },
      labelName: {
        type: [String, Number],
        default: 'label'
      },
      placeholder: {
        type: [String, Number],
        default: '请选择'
      }
    },
    data() {
      return {
        show: false,
        // activeVal: {
        //   [this.valueName]: '',
        //   [this.labelName]: '',
        // },
        columns: [],
        innerVal:this.value
      }
    },
    computed:{
      activeVal(){
        const target = this.options.find(item=>item[this.valueName]===this.innerVal)
        return target
      }
    },
    watch: {
      show(val) {
        this.$store.commit('setPopupOpen', val)
      }
    },
    mounted() {
    },
    methods: {
      itemClick(item,index){
        this.innerVal = item[this.valueName]
        this.$emit('change', item[this.valueName])
        this.$emit('input', item[this.valueName])
        this.show = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .su-select {
    width: 100%;
    &-handler{
      display: flex;
      height: 100%;
      justify-content: space-between;
      align-items: center;
    }
    &-placeholder{
      font-size: 30upx;
      color: #bbb;
    }
    &-value{
      font-size: 30upx;
      color: #333;
    }
    &-arrow{
      color: #aaa;
      font-size: 28upx;
    }
    &-options{
      &-item{
        display: flex;
        align-items: center;
        font-size: 30upx;
        padding: 20upx 30upx;
        border-bottom: solid 1upx #f7f7f7;
        .iconfont{
          font-size: 48upx;
          color: #ddd;
        }
        &__start{
          flex: 1;
        }
      }
    }
  }
</style>
